<template>
  <div class="grid">
    <div
      class="grid-item"
      v-for="(item, index) in relatedGoods"
      :key="index"
      @click.stop="toGoodsDetail(id)"
    >
      <img :src="item.picUrl" alt />
      <span>{{ item.name | ellipsis }}</span>
      <span>{{ item.brief | ellipsis}}</span>
      <span>￥{{ item.retailPrice  }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Grid",
  props: ["relatedGoods"],
  data() {
    return {};
  },
  created() {
  },
  methods: {
    toGoodsDetail(id) {
     this.$router.push({ path: "/goodsdetail" ,query: { id: id } }).catch(err => {});
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    }
  }
};
</script>

<style lang="less" scoped>
.grid {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    margin: 10px 0;
    padding: 10px 10px;
    :nth-child(3){
      color: #ccc;
    }
    :nth-child(4){
      color: #ee4a4a;
    }
    img {
      width: 140px;
      height: 140px;
    }
  }
}
</style>